
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1{
            color:#fff;
            text-align:center;
            font-size:60px;
            line-height:100px;
        }
        h1:nth-of-type(1){
            text-shadow: 0 1px 0 #000; /*凹进效果*/
        }
        h1:nth-of-type(2){
            text-shadow: 0 -1px 0 #000; /*凹进效果*/
        }
        h1:nth-of-type(3){
            text-shadow: 0 -1px 1px #000; /*凸出效果*/
        }
        h1:nth-of-type(4){
            text-shadow: 0 1px 1px #000; /*凸出效果*/
        }
    </style>
</head>
<body style="background:#fff">
<h1>凹进效果</h1>
<h1>凹进效果</h1>
<h1>凸出效果</h1>
<h1>凸出效果</h1>
</body>
</html> -